<template>
  <view class="activityReservation-page">
    <!-- <head-box></head-box> -->
    <view class="head-bg">
      <text class="title">活动预约</text>
    </view>
    <view class="activityReservation-page-main tab-botton">
      <view class="_main-tab-box">
        <view class="_tab-btn" :class="tabType == 1?'_tab-btn-active':''" @tap="changeTabType(1)"><text
            class="_btn-text">个人</text></view>
        <view class="_tab-btn" v-if="optionsRouter.type==='-99'" :class="tabType == 2?'_tab-btn-active':''" @tap="changeTabType(2)"><text
            class="_btn-text">组织</text></view>
      </view>

      <view class="_main-content">
        <view class="_main-content-win">
          <view class="_main-content-box" :class="tabType == 1?'_main-content-box-l':'_main-content-box-r'">

            <!-- 个人 start -->
            <view class="_main-content-box-item" v-if="tabType===1">

              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>姓名</text><text
                    class="xing">*</text></view>
                <view class="_main-item-chunk _main-item-val">
                  <input cursorSpacing="10" class="_main-item-val-input" type="text" v-model="name"
                         placeholder="请输入姓名" />
                </view>
              </view>
              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>证件号</text>
                  <text

                      v-if="needCreditNo==='2'"
                      class="xing">*</text>
                </view>
                <view class="_main-item-chunk _main-item-val">

                  <input cursorSpacing="10" class="_main-item-val-input" @blur="idCardBlur"
                         type="text" v-model="idCardNums" placeholder="请输入证件号" />
                </view>
              </view>
              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>年龄</text></view>
                <view class="_main-item-chunk _main-item-val">
                  <text>{{ageNum}}</text>

                </view>
              </view>
              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>性别</text></view>
                <view class="_main-item-chunk _main-item-val">
                  <text>{{sexType}}</text>
                </view>
              </view>
              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>手机号</text><text
                    class="xing">*</text></view>
                <view class="_main-item-chunk _main-item-val">

                  <input cursorSpacing="10" class="_main-item-val-input" type="text" v-model="telNum"
                         placeholder="请输入手机号" />

                </view>
              </view>

              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>职业</text></view>
                <view class="_main-item-chunk _main-item-val">
                  <input cursorSpacing="10" class="_main-item-val-input" type="text" v-model="jobName"
                         placeholder="请输入职业" />
                </view>
              </view>

              <view v-if="optionsRouter.isNeedFile==='1'">
                <view class="groupClass">

                  <u-cell-group :title-style="{
				  padding:0,
				  fontSize:'30rpx',
				  color: '#333'
				}">
                    <uni-file-picker limit="9" title="请上传材料图片"
                                     v-model="imageUpValue"
                                     fileMediatype="image"
                                     mode="grid"
                                     @select="onFileSelect"
                                     @delete="onFileDelImageFile"
                                     :auto-upload="false"
                    ></uni-file-picker>
                  </u-cell-group>
                </view>
              </view>

              <view class="_main-content-tips">
                <view class="_main-content-tips-text">
                  <text>信息完整有利于您更快的核实您的信息，我们承诺</text>
                </view>
                <view class="_main-content-tips-text">
                  <text>将保护您的隐私。</text>
                </view>
              </view>

              <view class="_main-content-confirm" @tap="addPerson"><text>提交</text></view>
            </view>
            <!-- 个人 end -->

            <!-- 企业 start -->
            <view class="_main-content-box-item" v-else>
              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>单位名称</text><text
                    class="xing">*</text></view>
                <view class="_main-item-chunk _main-item-val">

                  <input cursorSpacing="10" class="_main-item-val-input" type="text"
                         v-model="enterpriseName" placeholder="请输入单位名称" />

                </view>
              </view>

              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>单位类型</text><text
                    class="xing">*</text><text></text></view>
                <view class="_main-item-chunk _main-item-val">
                  <input cursorSpacing="10" class="_main-item-val-input" type="text"
                         v-model="enterpriseType" placeholder="请输入单位所属行业" />
                </view>
              </view>

              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>总计参加人数</text><text
                    class="xing">*</text></view>
                <view class="_main-item-chunk _main-item-val">
                  <input cursorSpacing="10" class="_main-item-val-input" disabled="disabled"
                         type="text" v-model="skuArray.length" placeholder="请输入人数" />
                  <text>人</text>

                </view>
              </view>
              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>联系人</text><text
                    class="xing">*</text></view>
                <view class="_main-item-chunk _main-item-val">
                  <input cursorSpacing="10" class="_main-item-val-input" type="text"
                         v-model="contactsName" placeholder="请输入单位联系人" />
                </view>
              </view>
              <view class="_main-item">
                <view class="_main-item-chunk _main-item-label"><text>联系人电话</text><text
                    class="xing">*</text></view>
                <view class="_main-item-chunk _main-item-val">
                  <input cursorSpacing="10" class="_main-item-val-input" type="text"
                         v-model="contactsTel" placeholder="请输入联系人电话" />
                </view>
              </view>
              <view class="textarea_box">
                <textarea :disabled="disabled" maxlength="3000" adjust-position="true"
                  @input="onTextRateChanggevalue" v-model="rylist"
                  placeholder="此处粘贴一整段信息，自动识别姓名电话和身份证。例如：张三,135****8888,3301**********3019 友情提示：中间用逗号分割，多个信息换行分开" />
              </view>
              <view class="uni-form-item uni-column">
                <!--                <uni-section title="报名信息" type="line"></uni-section>
 -->
                <view class="example-body" style="">
                  <view class="uni-flex uni-row">
                    <view class="btn" @click="addSku">添加报名人员</view>
                  </view>
                  <view class="uni-form-item uni-column">
                    <view class="ks"  v-for="(tmp,index) in skuArray" :key="index"
                          :data-id="index"
                          :style="{border:tmp.type?'1rpx solid red':''}">
                      <view class="_main-item">
                        <view class="_main-item-chunk _main-item-label"><text>姓名</text><text
                            class="xing">*</text></view>
                        <view class="_main-item-chunk _main-item-val">
                          <input cursorSpacing="10" class="_main-item-val-input" type="text"
                                 maxlength="15" v-model="tmp.name" placeholder="请输入姓名" />
                        </view>
                        <view class="text" style="width: 100rpx;">
                          <image class=""
                                 style="position: relative;width: 60rpx;height: 60rpx;top:10%;left:20rpx;"
                                 src="../../static/img/del.png" :data-src="index" @tap="delSku">
                          </image>
                        </view>
                      </view>
                      <view class="_main-item">
                        <view class="_main-item-chunk _main-item-label"><text>身份证</text> <text

                            v-if="needCreditNo==='2'"
                            class="xing">*</text></view>
                        <view class="_main-item-chunk _main-item-val">
                          <input cursorSpacing="10" class="_main-item-val-input" type="text"
                                 v-model="tmp.sex" placeholder="请输入身份证" />
                        </view>
                      </view>
                      <view class="_main-item">
                        <view class="_main-item-chunk _main-item-label"><text>电话</text><text
                            class="xing">*</text></view>
                        <view class="_main-item-chunk _main-item-val">
                          <input cursorSpacing="10" class="_main-item-val-input"
                                 :data-tel="tmp.tel" type="text" maxlength="11" v-model="tmp.tel"
                                 placeholder="请输入联系电话" />
                        </view>
                      </view>
                    </view>

                  </view>
                </view>
              </view>

              <view
                  v-if="$store.state.userInfo.userType===2"
                  class="_main-content-confirm"
              @click="onCorporateEmployees"
              ><text>选择企业员工</text></view>
              <view class="_main-content-confirm" @tap="addCompany"><text>提交</text></view>

              <view class="_main-content-tips">
                <view class="_main-content-tips-text">
                  <text>信息完整有利于您更快的核实您的信息，我们承诺</text>
                </view>
                <view class="_main-content-tips-text">
                  <text>将保护您的隐私。</text>
                </view>
              </view>


            </view>
            <!-- 企业 end -->
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="corporateShow" mode="center" width="100%" height="90%">
      <view class="corporateManagement-datas">
        <view class="search-data">
          <image
              class="search-icon"
              src="/static/img/search-icon.png"
              mode=""
              @click="onConfirm"
          ></image>
          <u-input
              placeholder="请输入搜索关键词"
              placeholder-style="{ opacity: 0.6,width: '600rpx',fontSize: '28rpx',fontFamily: 'PingFang',fontWeight: 500,color: '#888888',lineHeight: '40rpx', paddingRight:'43rpx', textIndent:'36rpx'}"
              :custom-style="{
              background: type==='a'?'#fff':'rgb(242, 242, 242)',
               width: '250rpx',
                fontSize: '28rpx',
                fontFamily: 'PingFang',
                fontWeight: 500,
                color: '#9E9E9E',
                'text-indent':'108rpx',
                height: '72rpx',
borderRadius: '36rpx',
            }"
              border-color="#fff"
              height="41rpx"
              v-model="corporateSearch"
              @clear="onClear"
              @confirm="onConfirm"
          />

        </view>
        <view class="flex justify-end">
          <checkbox-group @change="allChoose">
            <label>
              <checkbox value="all"  :checked="allChecked"></checkbox> {{allChecked?'取消':'全选'}}
            </label>
          </checkbox-group>
        </view>
        <corporateManagements :list="list" @select="onSelectClick"></corporateManagements>
        <view class="flex justify-end">
          <u-button hover-class="none" plain :custom-style="customStyle"
          @click="onQuit"
          >
            <text class="text">取消</text>
          </u-button>
          <u-button hover-class="none" plain :custom-style="customStyle"
          @click="onBind"
          >
            <text class="text">提交</text>
          </u-button>
        </view>
        <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
      </view>
    </u-popup>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import {
  addGpMovedate,
  addGpMovedatecom,
  getgpUsercom
} from '@/api/move';
import corporateManagements from '@/components/corporateManagements'
import uniSection from '@/components/uni-section/uni-section.vue'
import { asterisk } from '@/common/base'
import { getUsercommember,getUsercommemberList} from '@/api/usercommember'
import {
  identityCodeValid,
  checkMobile
} from '@/common/validateIdent.js'
import {getAnalyzeIDCard} from '@/common/type'
import { group1 } from '@/mixins/group-1'
import {base64Uploads,wwwApplication} from '@/common/variable'
// 以下路径需根据项目实际情况填写
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js'
export default {
  components: {
    uniSection,
    corporateManagements
  },
  mixins:[group1],
  props:{
    //样式类型
    type: {
      type: String,
      default () {
        return ''
      }
    },
  },
  data() {
    return {
      imageUpValue:[],//上传图片
      isChecked:false,
      checkboxData:[],//数据
      checkedArr:[], //复选框选中的值
      newCheckedArr:[], //已添加的数据
      allChecked:false, //是否全选
      optionsRouter:{},//地址栏参数
      //按钮样式
      customStyle: {
        width: '344rpx',
        height: '60rpx',
        background: 'linear-gradient(180deg, #82A5FF, #386FFF)',
        borderRadius: '30rpx',
      },
      needCreditNo:'',//是否需要身份证
      moveId: '',
      showState: 1,
      corporateShow:false,//法人选择员工操作展示
      corporateSearch:'',//搜索法人选择员工操作
      skuArray: [],
      // 第1、2个变量，是针对此页在H5状态时在普通浏览器打开和在微信打开的的区别
      paddingTopNum: '50px',
      topNum: '50px',
      tabType: 2, // tab切换 1 个人  2  企业
      name: '',
      idCardNums:'',
      idCardNum: '',
      ageNum: '',
      sexType: '',
      telNum: '',
      isIndex: 0,
      isArr: ['1-20万', '20-50万', '50-100万'],
      jobName: '',
      isIndex2: 0,
      isArr2: ['研究生', '本科', '专科', '高中', '初中', '小学'],
      isIndex3: 0,
      isArr3: ['是', '否'],
      isIndex4: 0,
      enterpriseType: '',
      isArr4: ['请选择企业类型', '合资', '独资', '国有', '私营', '全民所有制', '集体所有制', '股份制', '有限责任'],
      isIndex5: 0,
      isArr5: ['否', '是'],
      enterpriseName: '',
      peopleNum: 0,
      peopleNumMan: 12,
      peopleNumWoman: 18,
      contactsTel: '',
      contactsName: '',
      yqm: '',
      rylist: '',
      disabled: false,
      datasetIndex:0,//在那一项上面
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },

  onLoad(options) {
    if (options.id) {
      this.optionsRouter = options
      this.moveId = options.id;
      this.getUsercommember()

    }
    this.needCreditNo = options.needCreditNo;
    if(this.optionsRouter.isNeedFile==='1'){
      this.tabType= 1
    } else {
      this.tabType = options.faceTarget===''||options.faceTarget==='1'?1:2
    }

    // #ifdef H5
    const ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') { // H5时，在微信内打开
      this.paddingTopNum = '0';
      this.topNum = '0';
    } else {
      this.paddingTopNum = '50px';
      this.topNum = '50px';
    }

    getgpUsercom().then(res => {
      if (res.success) {
        this.enterpriseName = res.result.usercomName;
      }
    });
  },
  filter:{
    asteriskId(Id){
      return asterisk(Id,6, 8, 14)
    }
  },
  onShow() {
    // #ifdef H5
    console.log('分享')
    this.$wxSetShare()
    // #endif
    if (this.userInfo && this.userInfo.userPname) {
      this.name = this.userInfo.userPname;
      this.contactsName = this.userInfo.userPname;
    }
    if (this.userInfo && this.userInfo.userPid) {
      this.idCardNum = this.userInfo.userPid;
      this.idCardNums =  asterisk(this.userInfo.userPid,6, 8, 14)
    }
    if (this.userInfo && this.userInfo.userPhone) {
      this.telNum = this.userInfo.userPhone;
      this.contactsTel = this.userInfo.userPhone;
    }
    if (this.userInfo && this.userInfo.userCareer) {
      this.jobName = this.userInfo.userCareer;
    }
    // #endif
    if (this.idCardNum) this.idCardBlur()
    // this.$api.showinfo(this.userInfo);
  },
  watch: {},
  methods: {
    onFileSelect(e){
      let that = this;
      //上传
      var i=0;
      e.tempFiles.forEach(item=>{
        const token = uni.getStorageSync("token");
        let header={
        };
        header['content-type']=wwwApplication
        header["X-Access-Token"] = token


        pathToBase64(item.path)
            .then(base64 => {
              let url = base64Uploads

              uni.request({
                url: url, //仅为示例，非真实的接口地址
                data: {
                  fileStr: item.cloudPath+','+base64,
                },
                method: 'post',
                header: header,
                success: (res) => {
                  res = res.data
                  if(res.success)
                  {
                    i++;
                    item["httpurl"] = res.message;
                    that.imageUpValue.push(item);
                  }else
                  {
                  }
                }
              });


            })
      })
    },
    //删除申请资料的图片
    onFileDelImageFile(e){
      this.imageUpValue = this.imageUpValue.filter(x=>x.path != e.tempFilePath)
    },
    // 全选事件
    allChoose(e){
      let chooseItem = e.detail.value;

      // 全选
      if(chooseItem[0]=='all'){
        this.newSetNone(true)
        this.list.map(itemVal=>{
          this.checkedArr.push(itemVal);
        })
      }else{
        // 取消全选
        this.newSetNone()
        this.checkedArr=[];

      }

    },
    //确定
    onBind(){
      this.rylist = ''
      this.skuArray = []
      let str = ''
      if(!this.checkedArr.length){
        this.$api.msg('至少选择一位企业成员用户')
        return
      }
      this.checkedArr.map(item=>{
        str+=`${item.userPname},${item.userPid},${item.userPhone}\n`
      })
     this.rylist=str
      this.corporateShow=false
      this.onTextRateChanggevalue()
    },
    //取消
    onQuit(){
      this.corporateShow=false
      this.newSetNone()
    },
    //群团列表
    async  getList() {
      await this.getUserList({})
    },
    async getUserList(param){
      await this.getLists(getUsercommemberList,{pageSize:10000,pageNo:this.pageNo,...param})
      this.list.map(item=>{
        this.$set(item,'isSelect',false)
      })
    },
    //清空时操作
    async onClear(){
     this.newSetNone()
      if(!this.corporateSearch.length){
        this.onRest()
        await this.getUserList({})
      }
    },
    //重置操作
    newSetNone(select=false){
      this.list.map(c=>{
        c.isSelect=select
      })
      this.allChecked=select
    },
    //是否要勾选操作
    onSelectClick(item){
      item.isSelect=!item.isSelect
      const d= this.list.every(c=>c.isSelect)
      if(!d){
        this.allChecked=false
      }else {
        this.allChecked=true
      }
      if(!this.checkedArr.includes(item)){
        this.checkedArr.push(item);
      }else {
        this.checkedArr=this.checkedArr.filter(k=>k.id!==item.id)
      }
      if(this.allChecked){
        this.checkedArr.push(item);
      }
    },
    //搜索时判断
    async onConfirm(){
      this.onRest()
      this.list.map(c=>{
        c.isSelect=false
      })
      this.allChecked=false
      if(Number.isFinite(+this.corporateSearch)){
        await this.getUserList({
          userPhone:+this.corporateSearch
        })
      } else {
        await this.getUserList({
          userPname:this.corporateSearch
        })
      }
    },



    //判断是否为法人
    getUsercommember(){
      if(this.tabType ===2){
        if(this.$store.state.userInfo.userType===2){
          //企业成员管理-获取企业信息
          getUsercommember().then(res=>{
            const {result:{usercomName}} = res
            this.enterpriseName = usercomName

          }).catch(e=>{
            console.log ( e )
          })
        }
      }

    },
    //选择企业员工
    onCorporateEmployees(){
      this.corporateShow = true
      this.list = []
      this.rylist = ''
      this.allChecked = false
      this.checkedArr = []
      this.getList()
    },
    //编辑输入框内容
    onTextRateChanggevalue() {
      //如果this.rylist为空或者没有时
      if(!this.rylist.length || this.rylist.length===0 ){
        this.list.map(item=>{
          item.isSelect = false
        })
        this.allChecked = false
      }
      this.skuArray = []
      const val = this.rylist.replace(/\r/g, '');
      const list = val.split('\n');
      list.forEach((item, index) => {
        const women = item.split(',');
        if (women.length >= 1) {

          const val = this.skuArray.some(x => x.tel == women[1])
          if (val) {
            this.skuArray.push({
              id: index,
              name: women[0],
              tel: women[1],
              sex: women[2],
              type: true
            });
          } else {
            if (women.length == 2) {
              this.skuArray.push({
                id: index,
                name: women[0],
                tel: women[1],
                sex: '',
                type: false
              });
            } else if (women.length == 3) {
              this.skuArray.push({
                id: index,
                name: women[0],
                tel: women[1],
                sex: women[2],
                type: false
              });
            }
          }
        }
      })
    },
    isListSome() {
      let bool = false
      const val = this.skuArray.some((x,i)=>{
        return x.type
      })
      if (val) {
        bool = true
      }
      return bool
    },
    //个人
    addPerson() {
      var that = this
      if (that.name == '') {
        this.$api.msg('请输入姓名');
        return;
      }
      if(that.needCreditNo==='2'){
        if(that.idCardNum==""){
        	return this.$api.msg('请输入身份证');
        }
      }
      this.idCardNum = this.idCardNum.toUpperCase() //转换成大写
      const isIdCard = identityCodeValid(this.idCardNum);
      if (that.idCardNum != '') {
        if (!isIdCard) {
          return this.$api.msg('请输入正确的身份证');
        }
      }
      if (that.telNum == '') {
        this.$api.msg('请输入手机号');
        return;
      }
      if (!checkMobile(that.telNum)) {
        return this.$api.msg('请输入正确的手机号');
      }

      let userSex = 1;
      if (that.sexType == '女') { userSex = 2; }
      if(this.optionsRouter.isNeedFile==='1'){
        if(!this.imageUpValue.length){
          this.$api.msg('请上传材料图片')
          return
        }
      }
      const params = {
        'moveId': that.moveId,
        'userPname': that.name,
        'userPhone': that.telNum,
        'userPid': that.idCardNum,
        'userCareer': that.jobName,
        'userSex': userSex
      }
      this.$api.showLoading({title:'预约中...'})
      addGpMovedate(params).then(res => {
        if (res.success) {
          this.$api.hideLoading()
          this.$api.msg(res.result);
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/myactivity/myactivity'
            })
          }, 1000);
        } else if (res.message) {
          this.$api.msg(res.message);
        } else if (res.result) {
          this.$api.msg(res.result);
        }
      });
    },
    //组织
    addCompany() {
      var that = this
      if (that.enterpriseType == '') {
        this.$api.msg('请输入单位类型');
        return;
      }
      if (that.enterpriseName == '') {
        this.$api.msg('请输入单位名称');
        return;
      }
      if (that.contactsName == '') {
        this.$api.msg('请输入联系人');
        return;
      }
      if (that.contactsTel == '') {
        this.$api.msg('请输入联系人电话');
        return;
      }
      const comUserList = []
      for (let i = 0; i < this.skuArray.length; i++) {
        const ele = this.skuArray[i];
        if (!ele.name) {
          return this.$api.msg('请输入姓名');
        }
        ele.sex = ele.sex.toUpperCase() //转换成大写
        if (ele.sex != '') {
          const isIdCard = identityCodeValid(ele.sex);
          if (!isIdCard) {
            return this.$api.msg(ele.name + '请输入正确的身份证');
          }
        }

        // if(!isIdCard){
        // 	return this.$api.msg('请输入正确的身份证');
        // }
        if (!checkMobile(ele.tel)) {
          return this.$api.msg('请输入正确的手机号');
        }
        if (!!ele.name && !!ele.tel) {
          comUserList.push({
            'userPhone': ele.tel,
            'userPname': ele.name,
            'userPid': ele.sex
          })
        }
      }
      /*this.skuArray.forEach(ele => {
        if(!ele.name){
          return this.$api.msg('请输入联系人');
        }
        if(!!ele.name && !!ele.sex && !!ele.tel){
          comUserList.push({"userPhone":ele.tel,"userPname":ele.name,"userPid":ele.sex})
        }

      })*/
      if (comUserList.length == 0) {
        this.$api.msg('请输入报名信息');
        return;
      }
      if (this.isListSome()) {
        this.$api.msg('已出现重复，请先进行去重处理')
        return
      }

      var params = {
        'moveId': that.moveId,
        'usercomType': that.enterpriseType,
        'usercomName': that.enterpriseName,
        'movedatecomNum': comUserList.length,
        'movedatecomContact': that.contactsName,
        'movedatecomTel': that.contactsTel,
        'comUserList': comUserList
      }
      this.$api.showLoading({title:'预约中...'})
      addGpMovedatecom(params).then(res => {
        if (res.success) {
          this.$api.hideLoading()
          this.$api.msg(res.result);
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else if (res.message) {
          this.$api.msg(res.message);
          if (JSON.parse(res.message)?.errorStatus === '8004') {
            const list = JSON.parse(res.message)?.errorList

            list.map((item, index) => {
              const {
                userPhone: tel,
                userPid: sex,
                userPname: name
              } = item
              const val = this.skuArray.some(x => x.tel == tel)
              if (val) {
                this.$set(this.skuArray[index], 'type', true)
              }
              // this.onTextRateChanggevalue()
            })
          }
        } else if (res.result) {
          this.$api.msg('已出现重复信息');
        }
      });
    },
    //判断是否有相同的数据
    isRepeat(arr,key){
      const obj = {};

      for(let i=0;i<arr.length;i++){
        if(obj[arr[i][key]]){
          return false;
        }else{
          obj[arr[i][key]] = arr[i];
        }
      }
      return obj;
    },
    //添加列表
    addSku(e) {
      let types = true
      this.skuArray.map((item,index)=>{

        if(index>-1){
          if(!item.name.length){
            this.$api.msg(`请先添加第${index+1}项的必要姓名`)
            types = false
            return false
          } if(this.needCreditNo==='2'){
            if(!item.sex.length){
              this.$api.msg(`请先添加第${index+1}项的必要身份证信息`)
              types = false
              return false
            }
            const isIdCard = identityCodeValid(item.sex);
            if (!isIdCard) {
              types = false
              return this.$api.msg(`请正确输入第${index+1}项的身份证`);
            }
          }  if(!item.tel.length){
            types = false
            return this.$api.msg(`请输入第${index+1}项的手机号码`);
          }
          if (!checkMobile(item.tel)) {
            types = false
            return this.$api.msg('请输入正确的手机号');
          }
        }

      })
      const type = this.isRepeat( this.skuArray,'tel')
      if(!type){
        this.$api.msg('已存在重复的手机号码')
        this.skuArray.map(item=>item.type=true)
        return
      }
      if(types){
        this.skuArray.push({
          name: '',
          sex: '',
          tel: '',
          type: false,
        })
        this.skuArray.map(item=>item.type=false)
      }


    },
    //删除某一行或者列表
    delSku(e) {
      const sindex = e.target.dataset.src
      this.skuArray.splice(sindex, 1);
      this.list[sindex].isSelect=false
      this.checkedArr[sindex].isSelect=false
      this.allChecked =false
      console.log ( this.list,this.checkedArr )
      if (this.rylist !== '') {
        const val = this.rylist.replace(/\r/g, '');
        const obj = {}

        const list = val.split('\n');
        const arr = this.skuArray.filter((item, s1) => {
          const arrIndex = `${item.name},${item.tel},${item.sex}`
          if (list[s1]) {
            if (list[s1].split(',')[1] === item.tel) {
              obj['str'] = arrIndex
            }
            return obj
          }
        })
        let str = ''
        arr.filter((item, index) => {
          str += `${item.name},${item.tel},${item.sex}\n`
          return str
        })

        this.rylist = str
        this.onTextRateChanggevalue()
      }
    },
    changeTabType(type) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 30
      });
      this.tabType = type;
      this.rylist = ''
      this.skuArray = []
    },
    idCardBlur() {
      const _data = getAnalyzeIDCard(this.idCardNum);
      this.ageNum = _data.age;
      this.sexType = _data.sex;
    },
  },
}
</script>

<style lang="scss" scoped>
@import"@/style/mySelectChecked"
</style>
<style lang="scss" scoped>
@import"@/style/global-search"
</style>
<style lang="scss" scoped>
.search-data{
  .search-icon{
    z-index:11
  }
  .search-icon{
    left:36rpx;
  }
}
.head-bg {
  background-color: #2471E9;
  background-image: linear-gradient(#38B6FD, #2471E9);
  height: 250rpx;
  margin-bottom: -100rpx;
  text-align: center;
}
.head-bg .title{
  color: #fff;
  display: inline-block;
  line-height: 150rpx;
  font-size: 18px;
}
.textarea_box {
  margin: 20rpx 0;
  border: 1rpx solid #f3f3f3;
  border-radius: 10rpx;
  padding: 20rpx;
  height: 150rpx;
  textarea {
    font-size: 26rpx;
    height: 110rpx;
    boder:1px solid #f3f3f3;
  }
}

.activityReservation-page {
  width: 100%;
  box-sizing: border-box;

  .top-fixed {
    position: fixed;
    top: 0;
    z-index: 1;
  }

  .state {
    label {
      margin: 0 10rpx;
    }
  }

  .top {
    width: 100%;
    height: 100rpx;
    padding: 0 30rpx;
    // background-color: #007AFF;
    background-color: #f7f7f7;
    box-shadow: 0 1px 6rpx #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .top-text {
      color: #000;
      font-size: 34rpx;
    }
  }

  .ks {
    padding: 30rpx;
    background-color: #f8f8f8;
    margin: 20rpx 0;
    border-radius: 20rpx;
  }

  .top-box {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    line-height: 100rpx;

    .back-img {
      width: 44rpx;
      height: 40rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      margin-left: 0rpx;
    }
  }

  .activityReservation-page-main {
    position: relative;
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    background: #fff;

    ._main-tab-box {
      width: 100%;
      height: 80rpx;
      padding-top: 10rpx;
      margin-bottom: 20rpx;
      background-color: #fff;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      // position: fixed;
      // top: 100rpx;
      z-index: 1;

      ._tab-btn {
        width: 15%;
        height: 100%;
        margin-left: 10px;
        line-height: 80rpx;
        color: #777;
        font-size: 28rpx;
        text-align: center;
      }

      ._tab-btn-active {
        color: #000;

        ._btn-text {
          border-bottom: 4rpx solid #037bff;
          padding: 0 0 15rpx;
          font-size: 30rpx;
          box-sizing: border-box;
        }

      }
    }

    ._main-content {
      width: 100%;
      box-sizing: border-box;
      padding: 10rpx 40rpx;

      ._main-content-win {
        width: 100%;
        overflow-x: hidden;

        ._main-content-box {
          //width: 200%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          transition: all 0.2s linear;
          margin-top: 20rpx;

          ._main-content-box-item {
            width: 100%;

            ._main-item {
              // height: 86rpx;
              border: 1px solid rgba(200, 199, 204, 0.5);
              padding: 5rpx 20rpx;
              border-radius: 10rpx;
              margin-bottom: 40rpx;
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-between;
              align-items: center;

              ._main-item-chunk {
                font-size: 34rpx;
                color: #000;
                line-height: 84rpx;
              }

              ._main-item-label {
                //width: 35%;
                //min-width: 210rpx;
                white-space: nowrap;
              }

              ._main-item-val {
                //width: 65%;
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-end;
                align-items: center;
                line-height: 84rpx;
                height: 84rpx;

                ._main-item-val-head {
                  width: 48rpx;
                  height: 48rpx;
                  border-radius: 50%;
                  display: flex;

                  .head-img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }

                ._main-item-val-input {
                  text-align: right;
                  display: flex;
                  height: 100%;

                  ._main-item-val-input-text {
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
                  }

                  .drop-dowm-img {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 10rpx;
                    transform: rotateZ(270deg);
                  }
                }

                .drop-dowm-img {
                  width: 30rpx;
                  height: 30rpx;
                  margin-left: 10rpx;
                  transform: rotateZ(270deg);
                }
              }
            }

            ._content-box-item-chunk {
              width: 100%;
              border-bottom: 1px solid rgba(200, 199, 204, 0.2);
              padding-bottom: 33rpx;

              ._item-chunk-label {
                font-size: 28rpx;
                color: #000;
                font-weight: 600;
                margin-left: 20rpx;
                line-height: 60rpx;
              }

              ._item-chunk-val {
                height: 80rpx;
                background-color: #f6f6f6;
                border-radius: 10rpx;
                font-size: 26rpx;
                color: #000;
                padding: 0 20rpx;
                box-sizing: border-box;
                line-height: 80rpx;
                font-size: 26rpx;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;

                ._item-chunk-val-input {
                  width: 100%;
                  height: 100%;
                  line-height: 80rpx;
                  font-size: 26rpx;
                }

                ._main-item-val-input {
                  text-align: right;
                  display: flex;
                  width: 100%;
                  height: 100%;

                  /deep/ div {
                    // width: 100%;
                    // display: flex;
                    // flex-wrap: nowrap;
                    // justify-content: space-between;
                    // align-items: center;
                  }

                  ._main-item-val-input-text {
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
                  }

                  .drop-dowm-img {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 10rpx;
                    transform: rotateZ(270deg);
                  }
                }

                .drop-dowm-img {
                  width: 30rpx;
                  height: 30rpx;
                  margin-left: 10rpx;
                  transform: rotateZ(270deg);
                }

                ._val-box {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-wrap: nowrap;
                  justify-content: space-between;

                  ._val-box-input {
                    height: 100%;
                    line-height: 80rpx;
                    font-size: 26rpx;
                  }
                }
              }
            }
          }
        }

        ._main-content-box-l {
          margin-left: 0;
        }

        ._main-content-box-r {
          //margin-left: -100%;
        }
      }

      ._main-content-tips {
        width: 100%;
        margin-top: 40rpx;

        ._main-content-tips-text {
          width: 100%;
          text-align: center;
          font-size: 24rpx;
          color: #888;
        }
      }

      ._main-content-confirm {
        width: 100%;
        height: 80rpx;
        background-color: #037aff;
        border-radius: 10rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 32rpx;
        color: #fff;
        margin-top: 40rpx;
      }
    }
  }
}

.xing {
  color: #ff0000;
  margin-left: 10rpx;
}

// 添加报名人员样式
.uni-row {
  background: #f8f8f8;
  padding: 50rpx 0;
  text-align: center;

}

.uni-row .btn {
  position: relative;
  color: #007AFF;
  display: inline-block;
  padding-left: 50rpx;
  font-size: 17px;
}

.uni-row .btn::after {
  content: '+';
  position: absolute;
  left: -10%;
  top: 0;
  width: 40rpx;
  height: 40rpx;
  font-size: 40rpx;
  line-height: 35rpx;
  border: 1px dashed #007AFF;
}

.uni-form-item .title {
  padding: 5px 12px;
}

.uni-input {
  display: block;
  min-height: 1.4em;
  overflow: hidden;
  padding: 7px 12px;
  line-height: 30px;
  font-size: 14px;
  background: #FFF;
  -webkit-box-flex: 1;
  flex: 1;
}
</style>
